<div class="flex flex-col border-l border-1 border-slate-800 pl-3">
    <div class="py-2 flex justify-between">
        <div class="text-2xl font-bold text-slate-100"><%= @users |> Page.title("user") %></div>
        <%= render AzimuttWeb.PartialsView, "_page_search.html", page: @users %>
    </div>

    <div class="align-middle shadow sm:rounded-sm">
        <table class="w-full text-left">
            <thead class="text-gray-100 bg-slate-800 text-xs font-semibold">
            <tr>
                <th class="group p-1" scope="col">
                    Created at
                    <%= render AzimuttWeb.PartialsView, "_page_sort.html", page: @users, key: "created_at" %>
                </th>
                <th class="group p-1" scope="col">
                    Name
                    <%= render AzimuttWeb.PartialsView, "_page_sort.html", page: @users, key: "name" %>
                </th>
                <th class="p-1" scope="col">Email</th>
                <th class="p-1" scope="col">Phone</th>
                <th class="p-1" scope="col">Github</th>
                <th class="p-1" scope="col">Twitter</th>
                <th class="p-1" scope="col">Source</th>
                <th class="p-1" scope="col">Location</th>
                <th class="p-1" scope="col">Company</th>
                <th class="p-1" scope="col">Industry</th>
                <th class="p-1" scope="col">Description</th>
                <th class="p-1" scope="col">Data</th>
            </tr>
            </thead>
            <tbody class="divide-y divide-slate-800 text-slate-500 bg-slate-900">
                <%= for user <- @users.items do %>
                    <tr class=" text-xs whitespace-nowrap hover:bg-slate-800 hover:text-slate-300">
                        <td class="group p-1">
                            <%= format_datetime(user.created_at) %>
                            <%= render AzimuttWeb.PartialsView, "_page_filter.html", page: @users, key: "created_at", value: format_date_filter(user.created_at) %>
                        </td>
                        <td class="p-1" title={"Created on #{format_datetime(user.created_at)}"}>
                            <%= link to: Routes.admin_user_path(@conn, :show, user), class: "underline" do %>
                                <%= img_tag(user.avatar, class: "inline-block h-4 w-4 rounded-md") %>
                                <%= user.name %>
                            <% end %>
                        </td>
                        <td class="p-1">
                            <a href={"mailto:#{user.email}"} class="underline"><%= user.email %></a>
                        </td>
                        <td class="p-1">
                            <%= if user.profile && user.profile.phone do %>
                                <a href={"tel:#{user.profile.phone}"} class="underline"><%= user.profile.phone %></a>
                            <% end %>
                        </td>
                        <td class="p-1">
                            <%= if user.github_username do %>
                                <a href={"https://github.com/#{user.github_username}"} title="GitHub profile" class="underline"><%= user.github_username %></a>
                            <% end %>
                        </td>
                        <td class="p-1">
                            <%= if user.twitter_username do %>
                                <a href={"https://twitter.com/#{user.twitter_username}"} title="Twitter account" class="underline">@<%= user.twitter_username %></a>
                            <% end %>
                        </td>
                        <td class="p-1"><%= user.profile && user.profile.discovered_by %></td>
                        <td class="p-1"><%= user.profile && user.profile.location %></td>
                        <td class="p-1"><%= user.profile && user.profile.company %></td>
                        <td class="p-1"><%= user.profile && user.profile.industry %></td>
                        <td class="p-1 truncate max-w-xs" title={user.profile && user.profile.description}><%= user.profile && user.profile.description %></td>
                        <td class="p-1 truncate max-w-xs" title={user.data |> format_data()}><%= user.data |> format_data() %></td>
                    </tr>
                <% end %>
            </tbody>
        </table>
    </div>

    <%= render AzimuttWeb.PartialsView, "_pagination.html", page: @users %>
</div>
